<template>
<div class="image-grid">
    <!-- 返回按钮 -->
    <button class="back-button" @click="goBack">返回</button>

    <div class="row" v-for="(item, index) in items" :key="index">
      <div class="image-item" v-for="(img, idx) in item" :key="idx">
        <img :src="img.src" :alt="img.coachName" />
        <div class="info">
          <h3>{{ img.coachName }}</h3>
          <p>{{ img.description }}</p>
        </div>
      </div>
    </div>
</div>
</template>

<script>
export default {
  data() {
    return {
      items: [
        // 第一行，四张图片
        [
          { src: require('@/assets/img/Sana.jpg'), alt: 'Sana', coachName: 'Sana', description: '宁静而专注的瑜伽教练，引导学员在瑜伽垫上找到身心的和谐。' },
          { src: require('@/assets/img/Lily.jpg'), alt: 'Lily', coachName: 'Lily', description: '充满活力的健身操教练，将音乐与动作完美结合，提高心肺功能。' },
          { src: require('@/assets/img/Judy.jpg'), alt: 'Judy', coachName: 'Judy', description: '现代舞教练，融合多种舞蹈风格，鼓励学员通过舞蹈表达自我。' },
        ],
        // 第二行，四张图片
        [
          { src: require('@/assets/img/Joshua.jpg'), alt: 'Joshua', coachName: 'Joshua', description: '核心训练教练，专注于核心力量的打造，帮助学员塑造坚实的腹部和改善体态。' },
          { src: require('@/assets/img/Felix.jpg'), alt: 'Felix', coachName: 'Felix', description: '杠铃操教练，精确的动作指导和科学的训练计划，增强肌肉力量和提升新陈代谢。' },
          { src: require('@/assets/img/Karina.jpg'), alt: 'Karina', coachName: 'Karina', description: '普拉提教练，注重呼吸与动作的协调，提高身体意识，增强核心，提升柔韧性。' },
        ],
        // 第三行，四张图片
        [
          { src: require('@/assets/img/Giselle.jpg'), alt: 'Giselle', coachName: 'Giselle', description: '经络瑜伽教练，结合了瑜伽与经络学，疏通经络，促进血液循环。' },
          { src: require('@/assets/img/Ning.jpg'), alt: 'Ning', coachName: 'Ning', description: '东方舞教练，充满异国情调，教授学员如何通过舞蹈展现女性的魅力和优雅。' },
          { src: require('@/assets/img/Winter.jpg'), alt: 'Winter', coachName: 'Winter', description: '踏板操教练，以其高强度和快节奏著称，挑战学员的协调性和耐力。' },
          { src: require('@/assets/img/Lisa.jpg'), alt: 'Lisa', coachName: 'Lisa', description: '流瑜伽教练，Lisa教练的流瑜伽课程流畅而连贯，她的课程帮助学员在动作转换中找到呼吸的节奏，提升身体的力量和灵活性。' },
        ],
        // 第四行，四张图片
        [
          { src: require('@/assets/img/Jake.jpg'), alt: 'Jake', coachName: 'Jake', description: '动感单车教练，以其激励人心的指导和高强度间歇训练，帮助学员突破极限。' },
          { src: require('@/assets/img/Jennie.jpg'), alt: 'Jennie', coachName: 'Jennie', description: '尊巴兼健身球教练，尊巴课程融合了桑巴和其他巴西舞蹈元素，热情奔放和富有感染力的节奏，让学员在舞蹈中释放自我。' },
          { src: require('@/assets/img/Rose.jpg'), alt: 'Rose', coachName: 'Rose', description: '动感单车教练，以其精准的训练技巧和鼓励性的教学风格，帮助学员在骑行中找到力量和动力。' },
          { src: require('@/assets/img/Jackson.jpg'), alt: 'Jackson', coachName: 'Jackson', description: '蹦床兼动感单车教练，蹦床课程以其趣味性和高效燃脂而受到欢迎，让学员在跳跃中释放压力。' },
        ],
      ],
    };
  },
  methods: {
    goBack() {
      this.$router.push('/preorder');
    },
  },
};
</script>

<style scoped>
.image-grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr); /* 4列 */
  grid-template-rows: auto auto auto; /* 3行 */
  gap: 20px; /* 间距增加到20px */
  padding: 20px; /* 四周留白 */
  background-image: url('@/assets/img/main.jpg'); /* 添加背景图 */
  background-size: cover; /* 背景图覆盖整个容器 */
  background-position: center; /* 背景图居中显示 */
  color: #fff; /* 设置字体颜色为白色 */
}

.back-button {
  position: fixed; /* 固定定位 */
  left: 20px; /* 距离左边20px */
  bottom: 20px; /* 距离底部20px */
  padding: 20px 40px; /* 按钮内边距增大一倍 */
  background-color: #fff; /* 按钮背景颜色 */
  border: none; /* 无边框 */
  border-radius: 10px; /* 圆角边框 */
  cursor: pointer; /* 鼠标手型 */
  font-size: 16px; /* 字体大小 */
  box-shadow: 0 2px 4px rgba(0,0,0,0.2); /* 按钮阴影 */
  z-index: 10; /* 确保按钮在最上层 */
}

.image-item {
  width: 100%; /* 每个图片组占满分配的宽度 */
  display: flex;
  flex-direction: column;
  align-items: center;
}

.image-item img {
  width: 200px; /* 设置图片的固定宽度 */
  height: 300px; /* 设置图片的固定高度 */
  object-fit: cover; /* 图片自适应容器，保持宽高比 */
}

.info {
  text-align: center; /* 文本居中 */
  margin-top: 10px; /* 与图片间隔增加到10px */
}

.info h3 {
  margin: 0; /* 标题无外边距 */
  font-size: 16px; /* 标题字体大小 */
}

.info p {
  margin: 5px 0; /* 段落外边距 */
  font-size: 14px; /* 段落字体大小 */
}
</style>